<template>
	<view>
		<view class="card border-r8 " :class="[
      {
        'cardShadow': cardShadow
      },{
        'card1': index % 3 == 1
      },{
        'card2': index % 3 == 2
      },{
        'card3': index % 3 == 0
      }]" @click="cardClick">
			<view class="py-32 pl-32">
				<view class="text-FFF text-32 font-700 flex align-center justify-between pr-32">
					<view class="flex align-center" style="width: 80%;">
						<view class="u-line-1" style="width: 70%;">
							{{cardData.openBank}}
						</view>
					</view>


					<view class="text-28" v-if="untie" @click.stop="rightClick">
						{{rightTxt}}
					</view>

					<view class="image-40" @click.stop="rightClick" v-else>
						<image class="image-40" :src="cardData.isEye?'https://coo.fcios.com/profile/upload/2023/01/16/icon_eye_dis.png':'https://coo.fcios.com/profile/upload/2023/01/16/icon_eye_def.png'" mode="">
						</image>
					</view>
				</view>
				<view class="flex align-center justify-between pr-32" style="margin-top: 90rpx;">
					<view class="flex align-center">
						<view class="text-32 font-700 text-FFF cardNo">
							{{cardNo(cardData.cardNo)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bankCardBag",
		data() {
			return {

			};
		},
		props: {
			cardData: {
				default: null,
				type: Object
			},
			untie: {
				default: false,
				type: Boolean
			},
			cardShadow: {
				default: true,
				type: Boolean
			},
			// 是否为信用卡
			isCreditCard: {
				default: false,
				type: Boolean
			},
			index: {
				default: 1,
				type: Number
			},
			rightTxt: {
				default: '解绑卡片',
				type: String
			},
			// 是否查看卡号
			isEye: {
				default: true,
				type: Boolean
			},
		},
		methods: {
			cardNo(e) {
				let length = e.length
				if (e.length > 16) {
					return `${e.substring(0,4) } - ${e.substring(4,8)} - ${e.substring(8,12)} - ${e.substring(12,16)} - ${e.substring(16,length-1)}`
				} else {
					return `${e.substring(0,4) } - ${e.substring(4,8)} - ${e.substring(8,12)} - ${e.substring(12,16)}`
				}
			},
			rightClick() {
				this.$emit('rightClick')
			},
			cardClick() {
				this.$emit('cardClick');
			},
		}
	}
</script>

<style lang="scss">
	.bc {
		view {
			width: 50%;
		}
	}

	.card1 {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/card1@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.card2 {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/card2@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.card3 {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/card3@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.cardShadow {
		box-shadow: 0px 8px 20px 0px rgba(14, 45, 89, 0.3);
	}

	.cardNo {
		letter-spacing: 8rpx;
	}
</style>
